<template>
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{ profile.username }}</h4>
            <p>
              {{ profile.bio }}
            </p>
            <button class="btn btn-sm btn-outline-secondary action-btn">
              <i class="ion-plus-round"></i>
              &nbsp; Follow {{ profile.username }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <a class="nav-link active" href>My Articles</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href>Favorited Articles</a>
              </li>
            </ul>
          </div>
          <template v-for="ele in articles">
            <div class="article-preview" :key="ele.slug">
              <div class="article-meta">
                <nuxt-link
                  :to="{
                    name: 'Profile',
                    params: {
                      username: ele.author.username
                    }
                  }"
                >
                  <img :src="ele.author.image" />
                </nuxt-link>

                <div class="info">
                  <a href class="author">{{ ele.author.username }}</a>
                  <span class="date">{{
                    ele.createdAt | date('MMM DD, YYYY')
                  }}</span>
                </div>
                <button class="btn btn-outline-primary btn-sm pull-xs-right">
                  <i class="ion-heart"></i> 29
                </button>
              </div>
              <nuxt-link
                :to="{
                  name: 'Article',
                  params: {
                    slug: ele.slug
                  }
                }"
                class="preview-link"
              >
                <h1>{{ ele.title }}</h1>
                <p>{{ ele.description }}</p>
                <span>Read more...</span>
              </nuxt-link>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** eslint-disable */
import Md from 'markdown-it'
import { mapState } from 'vuex'
import { getProfiles, getArticles } from './api/index'

export default {
  middleware: 'auth', // 和middleware中的文件名对应
  data() {
    return {}
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    console.log(this.profile)
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error
  }) {
    const data = await getProfiles(params.username)
    console.log(data.data)
    const { data: data2 } = await getArticles({
      author: params.username
    })
    const md = new Md()
    let { articles } = data2

    articles = articles.map((ele) => {
      ele.body = md.render(ele.body)
      return ele
    })
    console.log(articles)
    return {
      profile: data.data.profile,
      articles
    }
  },
  methods: {
    async getProfiles() {}
  }
}
</script>

<style scoped></style>
